<template>
  <div>
    <el-table
      ref="table"
      lazy
      :load="getMenus"
      :data="dataList"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      border
      :expand-row-keys="expandArray"
    >
      <!-- <el-table-column type="selection" /> -->
      <el-table-column :show-overflow-tooltip="true" label="菜单标题" prop="title" />
      <el-table-column prop="menuSort" align="center" label="排序">
        <template slot-scope="scope">
          {{ scope.row.menuSort }}
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="path" label="权限标识(前端)" />
      <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识(后端)" />
      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
      <el-table-column prop="hidden" label="可见">
        <template slot-scope="scope">
          <span v-if="scope.row.hidden">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | formatTimeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130px" align="center" fixed="right">
        <template slot-scope="{row}">
          <div>
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="editMenu(row)" />
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deletMenu(row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Menu :show-menu.sync="showMenu" :title="'编辑菜单'" :edit-data="editData" @search="$emit('search')" />
  </div>
</template>
<script>
import { getMenus, del } from '@/api/system/menu'
import Menu from './Menu'
export default {
  components: { Menu },
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      editData: {},
      showMenu: false,
      expandArray: [],
      maps: new Map(),
      id: 0
    }
  },
  methods: {
    getMenus(tree, treeNode, resolve) {
      const params = { pid: tree.id }
      this.id = tree.id
      this.maps.set(this.id, { tree, treeNode, resolve })
      setTimeout(() => {
        getMenus(params).then(res => {
          resolve(res.list)
          if (res.list.length <= 0) treeNode.expanded = false
        })
      }, 100)
    },
    deletMenu(v) {
      console.log(this.maps.get(id), '删除')
      const { id } = v
      this.$confirm('确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del([id]).then(res => {
          this.expandArray = []
          this.$message.success('操作成功~')
          this.$emit('search')
          console.log('11111', this.maps.get(this.id))
          const { tree, treeNode, resolve } = this.maps.get(this.id)
          this.$set(this.$refs.table.store.states.lazyTreeNodeMap, id, [])
          this.getMenus(tree, treeNode, resolve)
        })
      })
    },
    // 编辑
    editMenu(val) {
      this.editData = val
      this.showMenu = true
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
